<template>
  <section class="todoapp">
    <hm-header @add="handleAdd"></hm-header>
    <hm-main
      @del="handleDel"
      @changeState="handleChangeState"
      :list="list"
    ></hm-main>
    <hm-footer @clear='handleClear' :list='list'></hm-footer>
  </section>
</template>

<script>
import HmHeader from "./components/hm-header.vue";
import HmMain from "./components/hm-main.vue";
import HmFooter from "./components/hm-footer.vue";
export default {
  components: {
    HmHeader,
    HmMain,
    HmFooter,
  },
  data() {
    return {
      list: [
        { id: 1, name: "吃饭", false: false },
        { id: 1, name: "睡觉", false: true },
        { id: 1, name: "打豆豆", false: false },
      ],
    };
  },
  methods: {
    handleDel(id) {
      this.list = this.list.filter(item => item.id !== id);
    },
    handleAdd(todoName) {
      this.list.unshift({
        id: +new Date(),
        name: todoName,
        false: false,
      });
    },
    handleChangeState(flag, id) {
      const obj = this.list.find(item => item.id === id);
      obj.flag = flag;
    },
    handleClear(){
      this.list  = this.list.filter(item =>item.flag===false);
    }
  },
};
</script>

<style></style>
